<template>
	<view class="network-wrapper">
		<map style="width: 100%; height: 300px;" 
		:latitude="latitude" :longitude="longitude" :markers="covers" :controls="[]" :scale="3" 
		:enable-building="true"
		:show-compass="true"
		>
		</map>
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { getStoreList  } from '@/http/home'
import { onReady } from '@dcloudio/uni-app'

import type { IHomeStore } from '@/types'

interface IMrker {
	latitude: number
	longitude: number
	iconPath: string
}

export default defineComponent({
	
	setup() {
		const state = reactive({
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			page: 1,
			pageSize: 100,
			covers: [] as Array<IMrker>
		})
		
		onReady(() => {
			getStoreListData()
		})
		
		const getStoreListData = async () => {
			let res = await getStoreList({ 
				page: state.page,
				pageSize: state.pageSize,
				userLatitude: state.latitude,
				userLongitude: state.longitude
			}) 
			if(res.code === 0) {
				if(res.data?.list) {
					
					state.covers = res.data.list.map((item: IHomeStore) => ({
						latitude: item.latitude,
						longitude: item.longitude,
						
					}))
				}
			}
			
		}
		return {
			...toRefs(state)		
		}
	}
})
</script>

<style>
</style>